<div id="pm_settings">
    <div class="settings">
        <div class="row">
            <section class="setting full pm_form settingsPayment-section">
                <moz-info></moz-info>
                <header-block class="settingsPayment-header-method">
                    <h2
                        class="settingsPayment-title-method"
                        translate
                        translate-context="Title">Payment methods</h2>
                </header-block>

                <div class="settingsPayment-content">
                    <div class="margin">
                        <button type="button" class="pm_button primary" ng-click="add()" translate-context="Action" translate>Add Payment Method</button>
                    </div>
                    <p class="alert alert-info" ng-show="methods.length === 0" translate-context="Info" translate>You have no saved payment methods.</p>

                    <div class="pm_table">
                        <table ng-show="methods.length > 0" id="paymentMethodsTable">
                            <thead>
                                <tr>
                                    <th scope="col"  class="number" translate-context="Title" translate>Method</th>
                                    <th scope="col" class="type" translate-context="Title" translate>Status</th>
                                    <th scope="col" class="actions" translate-context="Title" translate>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr ng-repeat="method in methods">
                                    <td>
                                        <span ng-if="method.Type === 'card'">
                                            <span class="uppercase">{{ method.Details.Brand}}</span> •••• {{ method.Details.Last4 }}
                                        </span>
                                        <span ng-if="method.Type === 'paypal'">PayPal {{ method.Details.Payer }}</span>
                                    </td>
                                    <td>
                                        <span class="pm_badge" ng-show="$first" translate-context="Info" translate>Default</span>
                                        <span class="pm_badge error" ng-if="method.Type === 'card' && isExpired(method)" translate-context="Info" translate>Expired</span>
                                    </td>
                                    <td class="text-right">
                                        <button type="button" class="pm_button link" ng-hide="$first === true" ng-click="default(method)"
                                            translate-context="Action" translate>Make default</button>
                                        <button ng-if="method.Type === 'card'" type="button" class="pm_button link" ng-click="edit(method)" translate-context="Action"
                                            translate>Update</button>
                                        <button type="button" class="pm_button link" ng-click="delete(method)" translate-context="Action"
                                            translate>Delete</button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </section>
            <invoice-section></invoice-section>
        </div>
    </div>
</div>
